<template>
  <div>

    <el-dialog :title=$store.state.ruleDialogTitle :visible.sync="$store.state.ruleDialogVisible" width="70%" :before-close="handleClose">
      <template>
        <el-row>
          <el-col :span="12">
            <el-transfer v-model="ruleInfo.ids" :data="$store.state.personList" @change="personValueChange" :titles="personTableTitle">
            </el-transfer>
            <el-transfer v-model="ruleInfo.types" :data="$store.state.taskTypeList" @change="taskTypeValueChange" :titles="taskTypeTableTitle"
                         style="margin-top: 20px">
            </el-transfer>
          </el-col>

          <el-col :span="12">
            <el-form ref="form" :model="ruleInfo" :rules="formRules" size="small">
              <el-form-item label="规则描述">
                <el-input v-model="ruleInfo.memo" style="width: 60%;" placeholder="该分配规则描述"></el-input>
              </el-form-item>

              <el-form-item label="用户类型" prop="userType">
                <el-select v-model="ruleInfo.userType" placeholder="用户类型">
                  <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分配个数" prop="allotment">
                <el-input v-model="ruleInfo.allotment" style="width: 60%;" placeholder="平均分配的个数" ></el-input>
              </el-form-item>
              <el-form-item label="cron时间" prop="cron">
                <el-input v-model="ruleInfo.cron" style="width: 60%;" placeholder="cron表达式 [ 0 0 8 * * ? ] 表示每天8点的任务" ></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="cronTextChange(ruleInfo.cron, true)">验证</el-button>
              </el-form-item>

              <div style="margin-top: 20px">
                <p style="color: firebrick">最近5次的运行时间</p>
                <p v-for="text in ruleInfo.cronText">
                  <el-tag size="mini" style="color: firebrick; margin-top: 5px">{{text}}</el-tag>
                </p>

                <hr style="margin: 5px"/>
                <p style="color: #6f7180">常用cron表达式</p>
                <p v-for="text in cronNoticeTexts">
                  <el-tag size="mini" style="color: #6f7180; margin-top: 5px">{{text}}</el-tag>
                </p>
              </div>
            </el-form>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button @click="$store.state.ruleDialogVisible = false; $store.state.ruleInfo = {}">取 消</el-button>
          <el-button type="primary" @click="clickTaskRule('form')">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
  import {mapState} from 'vuex';

  export default {
    components: {},
    name: 'RuleDialog',
    props: {},
    computed:{
      ...mapState({
        ruleDialogVisible: state=>state.ruleDialogVisible,
        ruleInfo: state=>state.ruleInfo
      })
    },
    data () {
      return {
        formRules: {
          userType: [
            { required: true, message: '请输入用户类型', trigger: 'blur' }
          ],
          allotment: [
            { required: true, message: '请输入平均分配的个数', trigger: 'blur' }
          ],
          cron: [
            { required: true, message: '请输入cron表达式', trigger: 'blur' },
            { min: 7, max: 255, message: '长度在 7 到 255 个字符', trigger: 'blur' }
          ]
        },

        personTableTitle: ['待分配客服列表', '已选客服人员列表'],
        taskTypeTableTitle: ['待分配类型列表', '已分配类型列表'],
        userTypeOptions: [
          { value: 'YYLC', label: '盈盈理财' },
          { value: 'YYX', label: '盈优选' }
        ],

        cronNoticeTexts: [
          '"0 0 8 * * ?" - 每天上午8点触发',
          '"0 0 18 * * ?" - 每天下午6点触发',
          '"0 30 9 ? * MON-FRI" - 周一至周五的上午9:30触发',
          '"0 15 10 L * ?" 每月最后一日的上午10:15触发 ',
          '"0 15 10 ? * 6L" 每月的最后一个星期五上午10:15触发 '
        ]
      }
    },
    created() {
    },
    methods: {
      // 客服人员列表和任务类型列表更新方法
      personValueChange() {
      },
      taskTypeValueChange() {
      },
      async cronTextChange(cron, show) {
        this.ruleInfo.cronText = [];
        if(typeof cron === "undefined" || cron === null || cron === '') {
          this.$message.error("cron表达式为空");
          return;
        }

        let data = await this.$$put("/rule/check/cron", { cron: cron });
        if (this.checkResponse(data)) {
          this.$store.state.ruleDialogVisible = false;
          this.ruleInfo.cronText = data.data.data;
          this.$store.state.ruleDialogVisible = true;
          if (show) {
//            this.$message.success("cron表达式正确");
          }
        }
      },
      clickTaskRule(form) {
        if (this.ruleInfo.ids === undefined || this.ruleInfo.ids === null || this.ruleInfo.length <= 0) {
          this.$message.error("已选客服人员列表为空");
          return;
        }
        if (this.ruleInfo.types === undefined || this.ruleInfo.types === null || this.ruleInfo.types <= 0) {
          this.$message.error("已分配类型列表为空");
          return;
        }
        if (this.ruleInfo.memo === undefined || this.ruleInfo.memo === null) {
          this.$store.state.ruleInfo.memo = '';
        }

        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.$store.state.ruleDialogTitle === this.$store.state.addRuleDialogTitle) {
              this.addTaskRule();
            } else if (this.$store.state.ruleDialogTitle === this.$store.state.updateRuleDialogTitle) {
              this.updateTaskRule();
            } else {
              this.$message.error('未知错误');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async addTaskRule() {
        let data = await this.$$post('/rule', {
          allotServiceId:  this.$store.state.ruleInfo.ids.join(','),
          allotTaskCode:   this.$store.state.ruleInfo.types.join(','),
          userType: this.$store.state.ruleInfo.userType,
          autoAllotTime: this.$store.state.ruleInfo.cron,
          allotment: this.$store.state.ruleInfo.allotment,
          memo:  this.$store.state.ruleInfo.memo
        });
        if (this.checkResponse(data)) {
          this.$message.success("添加任务规则成功");
          this.$store.state.ruleDialogVisible = false;
          this.addTaskRuleInfo = {};
          this.$parent.loadRuleList();
        }
      },
      async updateTaskRule() {
        let data = await this.$$put('/rule', {
          id: this.$store.state.ruleInfo.id,
          status: this.$store.state.ruleInfo.status,
          allotServiceId:  this.$store.state.ruleInfo.ids.join(','),
          allotTaskCode:   this.$store.state.ruleInfo.types.join(','),
          userType: this.$store.state.ruleInfo.userType,
          autoAllotTime: this.$store.state.ruleInfo.cron,
          allotment: this.$store.state.ruleInfo.allotment,
          memo:  this.$store.state.ruleInfo.memo
        });
        if (this.checkResponse(data)) {
          this.$message.success("更新任务规则成功");
          this.$store.state.ruleDialogVisible = false;
          this.addTaskRuleInfo = {};
          this.$parent.loadRuleList();
        }
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
